<template>
 <!-- tab栏 顶部 -->
 <div>
      <div class='tab-bar'>
        <span class='item' :class="{active:tag=='全部'}" @click="tag='全部'">全部</span>
        <span class='item' :class="{active:tag=='欧美'}" @click="tag='欧美'">欧美</span>
        <span class='item' :class="{active:tag=='华语'}" @click="tag='华语'">华语</span>
        <span class='item' :class="{active:tag=='流行'}" @click="tag='流行'">流行</span>
        <span class='item' :class="{active:tag=='说唱'}" @click="tag='说唱'">说唱</span>
        <span class='item' :class="{active:tag=='摇滚'}" @click="tag='摇滚'">摇滚</span>
        <span class='item' :class="{active:tag=='民谣'}" @click="tag='民谣'">民谣</span>
        <span class='item' :class="{active:tag=='电子'}" @click="tag='电子'">电子</span>
        <span class='item' :class="{active:tag=='轻音乐'}" @click="tag='轻音乐'">轻音乐</span>
        <span class='item' :class="{active:tag=='影视原声'}" @click="tag='影视原声'">影视原声</span>
        <span class='item' :class="{active:tag=='ACG'}" @click="tag='ACG'">ACG</span>
        <span class='item' :class="{active:tag=='怀旧'}" @click="tag='怀旧'">怀旧</span>
        <span class='item' :class="{active:tag=='治愈'}" @click="tag='治愈'">治愈</span>
        <span class='item' :class="{active:tag=='旅行'}" @click="tag='旅行'">旅行</span>
      </div>  
     <div class="tab-content">
        <div class="items">
          <div class="item" v-for='(item,index) in  tabitemlist' :key='index' ref="tabitemlist" >
            <div class="img-wrap">
              <div class="num-wrap">
                播放量:
                <span class="num">{{item.playCount}}</span>
              </div>
              <img :src="item.coverImgUrl" alt="" />
              <span class="iconfont icon-play"></span>
            </div>
            <p class="name">{{item.name}}</p>
          </div>
        </div>
      </div>
     </div>
</template>
<script>
import axios from "axios"
export default {
    name:'tab',
    components:{
       
    },
    data(){
      return{
       /*  当前选择的数据 */
      tag:"全部",
        tabitemlist:[]
      }
    },
    created(){ 
    },
    watch:{
      tag(){
        //topcard顶部的精品歌单
          axios({
            url:'https://autumnfish.cn/top/playlist/highquality',
            method:'get',
            params:{ 
              cat:this.tag     
            }        
        }).then(res=>{
          this.topcardlist=res.data.playlists[0]
        })
       /*  歌单列表 */
          axios({
        url:'https://autumnfish.cn/top/playlist/',
        method:'get',
        params:{
         limit:10,
          cat:this.tag     
        }
      }).then(res=>{
        /* console.log(res) */
        this.tabitemlist=res.data.playlists 
      })
      }
    }
}
</script>

<style>

</style>